<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <b-tabs justified nav-class="nav-tabs-custom newul" content-class="p-3 text-muted">
              <b-tab active>
                <template v-slot:title>
                  <span class="d-inline-block d-sm-none">
                    <i class="fas fa-cog"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">数据实例</span>
                </template>
                <div>
                  <div>
                    <span>数据源名称1</span>
                    <span style="margin: 0 10px;">></span>
                    <span>数据表名</span>
                  </div>
                  <div style="max-width:400px;margin-top:20px;">
                    <b-form-input
                      for="text"
                      v-model="name"
                      placeholder="请输入数据表名称"
                      trim
                    ></b-form-input>
                  </div>
                  <hr class="my-4">
                  <div>
                    <p>数据表字段<span class="pointer" style="margin-left:20px;" @click="addField">+添加字段</span></p>
                    <div v-for="(item,index) in dataTableFields" :key="index" class="row" style="margin-bottom: 20px;align-items: center;">
                      <div class="col-lg-3">
                        <b-form-input
                          for="text"
                          v-model="item.name"
                          placeholder="字段名称"
                          trim
                        ></b-form-input>
                      </div>
                      <div class="col-lg-3">
                        <select v-model="item.type" class="form-control">
                          <option value="0">选择字段类型</option>
                        </select>
                      </div>
                      <div class="col-lg-3">
                        <b-form-input
                          for="text"
                          v-model="item.desc"
                          placeholder="字段备注"
                          trim
                        ></b-form-input>
                      </div>
                      <div class="col-lg-3">
                        <el-checkbox v-model="item.majorKeystatus">设置主键</el-checkbox>
                        <el-checkbox v-model="item.notNullStatus">字段非空</el-checkbox>
                        <span class="pointer" @click="deleteFields(index)" style="margin-left:30px;">删除字段</span>
                      </div>
                    </div>
                    <div>
                      <b-button @click="sub" class="btn btn-primary" variant="success">提交数据</b-button>
                    </div>
                  </div>
                </div>
              </b-tab>
              <b-tab>
                <template v-slot:title>
                  <span class="d-inline-block d-sm-none">
                    <i class="fas fa-cog"></i>
                  </span>
                  <span class="d-none d-sm-inline-block">数据源</span>
                </template>
                数据源
              </b-tab>
            </b-tabs>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script>
import Layout from "../../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";

export default {
  components: {
    Layout,
    PageHeaderNew,
  },
  data() {
    return {
      items: [
        {
          text: "数仓实例",
          url: "/datahouse/example",
        },{
          text: "添加数据表",
          url: "/",
        }
      ],
      name: "",
      dataTableFields: [
        {
          name: "",
          type: "0",
          desc: "",
          majorKeystatus: false,
          notNullStatus: false,
        },{
          name: "",
          type: "0",
          desc: "",
          majorKeystatus: false,
          notNullStatus: false,
        },{
          name: "",
          type: "0",
          desc: "",
          majorKeystatus: false,
          notNullStatus: false,
        }
      ],
    };
  },
  methods: {
    addField(){
      this.dataTableFields.push({
        name: "",
        type: "0",
        desc: "",
        majorKeystatus: false,
        notNullStatus: false,
      })
    },
    deleteFields(i){
      this.dataTableFields.splice(i,1)
    },
    sub(){
      this.$router.push('/datahouse/example')
    },
  }
};
</script>

<style lang="scss" scoped>
.card-body ::v-deep .newul{
  display: block;
  li{
    display: inline-block;
    margin: 0 1rem;
    a{
      padding: 0.5rem 0rem;
    }
  }
}
</style>